<template>
	<view>

		<uni-nav-bar dark :fixed="true" shadow background-color="red" status-bar  left-text=" "
			title=" " @clickLeft="goBack"></uni-nav-bar>

		<view class="main">
			<view class="nav">
				<view v-for="(item,ins) in QuanType" :key="ins" @tap="getTypeQuan(item.value)"
					:class="['li',selType==item.value?'selectType':'']">
					{{item.name}}
				</view>
			</view>
			<view class="bor">
				<view class="cai">
					<!-- 	<view class="rows  select">美容美发</view>
					<view class="rows">母婴</view>
					<view class="rows">酒店</view> -->
					<view v-for="(item,ins) in CaiType" :key="ins" @tap="getCaiTypeQuan(item.id)"
						:class="['rows',selCaiType==item.id?'select':'']">
						{{item.promotionsUserTypeNm}}
					</view>
				</view>
				<view class="mainNew">
					<view class="juan" v-for="(item,ins) in QuanList" :key="ins">
						<view class="w1">
							<!-- 15元 -->
							{{formatUnit(item)}}
						</view>
						<view class="right">
							<view>
								<view class="righe_title">{{item.location}}</view>
								<view class="righe_date">{{formatexpireDate(item.expirationDate)}}后过期</view>
							</view>
							<view>
								<view class="righe_ju">{{item.distance}}km</view>
								<view class="righe_shi" @tap="setUse(item)">去使用</view>
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="juan">
					<view class="w1">
						15元
					</view>
					<view class="right">
						<view>
							<view class="righe_title">红旗连锁（经天路店）</view>
							<view class="righe_date">2024:12:12后过期</view>
						</view>
						<view>
							<view class="righe_ju">3.5km</view>
							<view class="righe_shi">去使用</view>
						</view>
					</view>
				</view>
				 -->
			</view>

			<view class="tuig2">
				<view class="tuig" @tap="nato('/pages/red/zhe')">我要推广</view>
			</view>



		</view>

		<view class="bg" v-if="useShow==2"></view>
		<view class="hexiaoma" v-if="useShow==2" @tap="cancelUse()">
			<view class="address">商家地址：{{AddressCode.promotionAddress }}</view>
			<view class="ma">核销码：{{AddressCode.couponCode}}</view>
		</view>
		<redFoor></redFoor>
	</view>
</template>

<script>
	const app = getApp();
	import redFoor from '@/components/red/index.vue';
	import Cache from '../../utils/cache';
	import {
		getLogo,
		silenceAuth,
		routineBindingPhone
	} from '../../api/public';
	import {
		LOGO_URL,
		EXPIRES_TIME,
		USER_INFO,
		STATE_R_KEY
	} from '../../config/cache';
	import {
		SHType
	} from "@/api/classification";
	import {
		GetUserCouponBag
	} from "@/api/redmy";
	export default {
		components: {
			redFoor
		},
		data() {
			return {
				selType: "3",
				selCaiType: "",
				useShow: "0",
				QuanArr: [
					// {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "15",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(经天路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "3.5"
					// },
					// {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "15",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// }, {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "17",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },

					// {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "18",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "19",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "dikou",
					// 	"CaiType": "jiudian",
					// 	"Title": "20",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "zhekou",
					// 	"CaiType": "jiudian",
					// 	"Title": "0.8",
					// 	"subTitle": "",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "zhekou",
					// 	"CaiType": "jiudian",
					// 	"Title": "0.7",
					// 	"subTitle": "",
					// 	"location": "山姆的微笑(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "shangpin",
					// 	"CaiType": "shenghuo",
					// 	"Title": "旺仔牛奶",
					// 	"subTitle": "100ml",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
					// {
					// 	"QuanType": "shangpin",
					// 	"CaiType": "shenghuo",
					// 	"Title": "雪花啤酒",
					// 	"subTitle": "500ml",
					// 	"location": "红旗连锁(牛王庙路店)",
					// 	"expireTime": "2025.12.01",
					// 	"distance": "1.5"
					// },
				],
				QuanList: [],
				QuanType: [{
						"name": "抵扣券",
						"value": "1"
					},
					{
						"name": "折扣券",
						"value": "4"
					},
					{
						"name": "商品券",
						"value": "3"
					}
				],
				AddressCode: {
					"couponCode": "",
					"promotionAddress": ""
				},
				CaiType: [
					// {
					// 	"name": "美容美发",
					// 	"value": "meifa"
					// },
					// {
					// 	"name": "母婴",
					// 	"value": "muying"
					// },
					// {
					// 	"name": "酒店",
					// 	"value": "jiudian"
					// },
					// {
					// 	"name": "生活",
					// 	"value": "shenghuo"
					// },
				],
			}
		},

		onLoad() {
			this.getType();

			this.GetQuanlist();
			//this.GetUserCouponBag();
		},
		methods: {
			cancelUse() {
				this.useShow = "0";
			},
			setUse(item) {
				this.AddressCode={
					"couponCode": item.couponCode,
					"promotionAddress": item.promotionAddress
				},
				this.useShow = "2";

			},
			GetQuanlist() {
				GetUserCouponBag({
						openid: this.$store.state.user.openid,
						couponType: this.selType,
						userType: this.selCaiType
					})
					.then(res => {
						var promotionUsers = res.data;
						promotionUsers = promotionUsers.map(({
							...rest
						}) => {
							return {
								distance: "3.5",
								location: "红旗连锁(经天路)",
								...rest
							};
						});
						this.QuanList = promotionUsers;
					})
					.catch(res => {

					});
			},

			getType() {
				SHType({})
					.then(res => {
						this.CaiType = res.data
					})
					.catch(res => {

					});
			},
			formatUnit(item) {
				var reval = "";
				if (item.luckyDrawCouponType == "1") {
					reval = item.couponAmount + "元";
				} else if (item.luckyDrawCouponType == "4") {
					reval = item.couponAmount + "折";
				} else {
					reval = item.couponName;
				}
				return reval;
			},
			formatexpireDate(item) {
				var date = new Date(item);
				var expireDate = this.formatDate(date, 'yyyy-MM-dd');
				return expireDate;
			},
			formatDate: function(date, fmt) {
				date.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				let o = {
					'M+': date.getMonth() + 1,
					'd+': date.getDate(),
					'h+': date.getHours(),
					'm+': date.getMinutes(),
					's+': date.getSeconds()
				}
				for (let k in o) {
					if (new RegExp(`(${k})`).test(fmt)) {
						let str = o[k] + ''
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
					}
				}
				return fmt
			},
			padLeftZero: function(str) {
				return ('00' + str).substr(str.length)
			},
			// GetQuanlist() {
			// 	var list = JSON.parse(JSON.stringify(this.QuanArr));
			// 	if (this.selCaiType != "") {
			// 		list = list.filter(t => t.QuanType == this.selType && t.CaiType == this.selCaiType);
			// 	} else {
			// 		list = list.filter(t => t.QuanType == this.selType);
			// 	}
			// 	this.QuanList = list;
			// },
			getTypeQuan(type) {
				this.selType = type;
				this.selCaiType = "";
				this.GetQuanlist();
			},
			getCaiTypeQuan(type) {
				this.selCaiType = type + "";
				this.GetQuanlist();
			},
			nato(url) {

				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页面
				});
			},
		}
	}
</script>

<style>
	/* .title {
		color: #3D3D3D;
		text-align: center;
		margin-top: 10%;
		font-size: 35upx;
	} */



	.main {
		/* width: 95%; */
		/* margin: 0 10upx; */
		/* margin-top: 5%; */
	}

	.mainNew {
		width: 100%;
		flex: 1;
		overflow-y: auto;
		margin-bottom: 5%;
	}

	.nav {
		display: flex;
		position: fixed;
		width: 100%;
		top: 11%;
		/* z-index: 1000; */
		background-color: #f5f5f5;
		height: 80upx;
		align-items: center;
		justify-content: left;
	}

	.li {
		margin-left: 3%;
		margin-right: 3%;
		color: #3D3D3D;
		font-size: 35upx;
	}

	.bor {
		border: 1px solid #A5A5A5;
		padding: 3%;
		border-radius: 15rpx;
		flex-grow: 1;
		margin-top: 14%;
		/* margin-bottom: 30%; */
		position: fixed;
		width: 100%;
		overflow-y: auto;
		height: 70%;
	}

	.cai {
		display: flex;
	}

	.rows {
		margin-left: 2%;
		/* margin-right: 2%; */
		font-size: 25rpx;
	}

	.select {
		font-weight: 800;
		border-bottom: 1px solid #000;
	}

	.selectType {
		color: #3D3D3D;
		font-weight: 600;
	}

	.juan {
		display: flex;
		justify-content: space-between;
		margin-top: 3%;
	}

	.right {
		display: flex;
		width: 83%;
		justify-content: space-between;
		background-color: #FFCDCD;
		padding: 3%;
		border-radius: 13upx;
	}

	.w1 {
		width: 18%;
		background-color: #FFCDCD;
		color: #FC0000;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 13upx;
		margin-right: 1%;
		font-weight: 900;
	}

	.righe_title {
		color: #FC0000;
		font-weight: 900;
	}

	.righe_date {
		color: #666666;
		font-size: 25upx;
		margin-top: 3%;
		font-weight: 900;
	}

	.righe_ju {
		color: #000;
		font-weight: 800;
		text-align: center;
		margin-bottom: 3%;
	}

	.righe_shi {
		border: 1px solid #FC9090;
		color: #FC0000;
		font-weight: 800;
		border-radius: 25upx;
		width: 130upx;
		height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zi {
		text-align: right;
		color: #666666;
		margin-top: 10%;
	}

	.tuig {
		border: 1px solid #FC0000;
		color: #fff;
		width: 250upx;
		margin: 0 auto;
		height: 70upx;
		align-items: center;
		justify-content: center;
		border-radius: 35upx;
		margin-top: 8%;
		position: fixed;
		display: flex;
		bottom: 10%;
		left: 50%;
		/* 水平居中，先设置左移50%: ; */
		transform: translateX(-50%);
		/* 再根据元素自身宽度调整回来: ; */
		z-index: 1000;
		background-color: #FC0000;
		font-weight: bold;
	}

	.tuig2 {
		width: 100%;
		height: 6%;
		position: fixed;
		bottom: 9%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		/* z-index: 1000; */
		background-color: #f5f5f5;
	}

	.tuig1 {
		color: #FC0000;
		border: 1px solid #FC0000;
		width: 250upx;
		height: 70upx;
		align-items: center;
		justify-content: center;
		border-radius: 35upx;
		margin: 0 auto;
		margin-top: 10%;
		display: flex;
		position: fixed;
		bottom: 10%;
		left: 50%;
		/* 水平居中，先设置左移50%: ; */
		transform: translateX(-50%);
		/* 再根据元素自身宽度调整回来: ; */
		z-index: 1000;
	}

	.bg {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.8;
		left: 0;
		top: 0;
	}

	.hexiaoma {
		position: fixed;
		z-index: 1;
		background-color: #fff;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		height: 200upx;
		border-radius: 15upx;
		padding-top: 5%;
	}

	.address {
		text-align: center;
		color: #666666;
		font-weight: 600;
		font-size: 30upx;
	}

	.ma {
		text-align: center;
		color: #666666;
		margin-top: 5%;
	}
</style>